<template>
	<view class="scen-idle">
		<bar-title  bgColor='bg-white' :isSolid='true'>
			<block slot="content">发布闲本</block>
		</bar-title>
		
		
		
		<view class="padding-left margin-top">
			<view class="flex solid-bottom">
				<view class="product-icon">
					<view class="add-icon"
						@tap="imgclick('productIcon')" 
						v-if="!productIcon"
					>
						<view class='cuIcon-add'></view>
						<view class='text-xs text-gray'>剧本封面</view>
					</view>
					<view class="bg-img" v-else>
						<image :src="productIcon" mode="aspectFill"></image>
						<view class="cu-tag bg-red" 
							@tap.stop="DelImg" 
							data-index="-1"
						>
							<text class='cuIcon-close'></text>
						</view>
					</view>
				</view>
				<view class="product-name">
					<view class="cu-form-group">
						<view class="title">剧本名称</view>
						<input placeholder="请输入名称" class="input" 
							name="scenName"
							type="text"
							@blur="inputChange"
							confirm-type="next"
							data-key="scenName"
						/>
					</view>
					<view class="cu-form-group">
						<view class="title">剧本人数</view>
						<input placeholder="请输入玩家人数" class="input" 
							name="scenNum"
							type="number"
							@blur="inputChange"
							confirm-type="next"
							data-key="scenNum"
						/>
					</view>
				</view>
			</view>
			
			<view class="cu-form-group">
				<view class="title">发行商名称</view>
				<input placeholder="请输入发行商名称" class="input" 
					name="scriptPublisher"
					type="text"
					@blur="inputChange"
					confirm-type="next"
					data-key="scriptPublisher"
				/>
			</view>
			<view class="cu-form-group">
				<textarea maxlength="-1" 
					name="productDescription"
					type="number"
					@blur="inputChange"
					confirm-type="next"
					data-key="productDescription"
					placeholder="请输入闲置剧本状态描述..."></textarea>
			</view>
			
			<view></view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" 
						v-for="(item,index) in imgList" 
						:key="index" 
						@tap="ViewImage" 
						:data-url="imgList[index]"
					>
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" 
							@tap.stop="DelImg" 
							:data-index="index"
						>
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" 
						@tap="imgclick" 
						v-if="imgList.length<9"
					>
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group arrow">
				<view class="title">发货所在区域</view>
				<view @click="showMulLinkageThreePicker" class="input">
					<text class="text-gray" v-if="!pickerText">请选择所在地区</text>
					<text v-else>{{pickerText}}</text>
				</view>
				<text class="cuIcon-right text-gray"></text>
			</view>
			
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<input placeholder="请输入详情地址" class="input"  
					name="sellerAddress"
					type="text"
					@blur="inputChange"
					confirm-type="next"
					data-key="sellerAddress"
				/>
			</view>
			
			<view class="cu-form-group">
				<view class="title">原价</view>
				<view class="text-red text-sm">￥</view>
				<input placeholder="0.00" class="input text-red" 
					name="productPrice"
					type="digit"
					@blur="inputChange"
					confirm-type="next"
					data-key="productPrice"
				/>
			</view>
			
			<view class="cu-form-group">
				<view class="title">售价</view>
				<view class="text-red text-sm">￥</view>
				<input placeholder="0.00" class="input text-red" 
					name="productDiscountPrice"
					type="digit"
					@blur="inputChange"
					confirm-type="next"
					data-key="productDiscountPrice"
				/>
			</view>
			<view class="cu-form-group">
				<view class="title">运费</view>
				<view class="text-red text-sm">￥</view>
				<input placeholder="0.00" class="input text-red" 
					name="productTransportCosts"
					type="digit"
					@blur="inputChange"
					confirm-type="next"
					data-key="productTransportCosts"
				/>
				<view class="action" @click="isPackageMail=!isPackageMail">
					<text class="margin-lr-xs">包邮</text>
					<checkbox class="round cyan sm"
						:class="isPackageMail?'checked':''" 
						:checked="isPackageMail?true:false" 
						value="1"
					></checkbox>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">几成新</view>
				<view class="num-warp">
					<view class="response">
						<slider :value="1"
							data-key="productCommquality"
							@change="inputChange"
							selected-color="#23C2CD"
							show-value 
							min="1" 
							max="10"
						/>
					</view>
				</view>
				<!-- <input placeholder="请输入几成新" class="input" 
					name="productCommquality"
					type="number"
					@blur="inputChange"
					confirm-type="next"
					data-key="productCommquality"
				/> -->
			</view>
			<view class="cu-form-group">
				<view class="title">是否允许讲价</view>
				<switch class="cyan"
					:class="isWhetherPrice?'checked':''" 
					:checked="isWhetherPrice?true:false"
					@change="switchChange"  />
			</view>
			
		</view>	
		
		
		<mpvue-city-picker  ref="mpvueCityPicker"
			themeColor="#1cbbb4"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
		
		<!-- 底部 -->
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white shadow foot" >
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-cyan shadow-blur round lg"
					@click="onIssuer"
				>发布</button>
			</view>
		</view>
		
		
	</view>
</template>


<script module="bigNum" lang="wxs">
	function format (num) {
		var nArr = ['零','一','二','三','四','五','六','七','八','九','十']
		if(num-0<11) {
			return nArr[num-0]
		}
		return ''
	}
    module.exports = {
		format: format
    }
</script>
<script>

import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import { Leisurely } from '@/models/leisurely.js';
var cos = require('@/common/cos');
export default {
	components:{
		mpvueCityPicker
	},
	data() {
		return {
			pickerText: '',
			productIcon: '',
			isWhetherPrice: false,
			isPackageMail: false,
			issuerData: {
				productCommquality: 1
			},
			imgList: [],
			
		}
	},
	methods: {
		onIssuer () {
			this.issuerData.list = this.imgList.map(item => {
				return {
					productsurl: item
				}
			})
			this.issuerData.productIcon = this.productIcon
			let checkRes = this.$graceChecker.check(this.issuerData,
				this.$formRuleConfig['issuerIdle'])
			if (!checkRes) {
				this.$mTool.showToast({
					title: this.$graceChecker.error,
					icon: 'none',
					mask: true
				})
				return
			}
			if(!this.issuerData.list.length) {
				this.$mTool.showToast({
					title: '至少上传一张闲置剧本详情图片',
					icon: 'none',
					mask: true
				})
				return
			}
			this.issuerData.isPackageMail = this.isPackageMail?"1":"0";
			this.issuerData.isWhetherPrice = this.isWhetherPrice?"1":"0";
			if(!this.issuerData.productTransportCosts) {
				this.issuerData.productTransportCosts = 0
			}
			Leisurely.issuerIdle(this.issuerData).then(() => {
				this.$mTool.showModal({
					title: '提交成功',
					content: '提交内容将于平台审核通过后会展示，审核期间请勿重复提交！',
					showCancel: false,
					success: res => {
						if (res.confirm) {
							this.$backPage()
						}
					}
				})
				// setTimeout(() => {
				// 	this.$jumpPages('myidle')
				// }, 800)
			})
			
		},
		inputChange(event) {
			const key = event.currentTarget.dataset.key;
			this.issuerData[key] = event.detail.value;
			console.log(this.issuerData);
		},
		switchChange(e){
			this.isWhetherPrice = e.detail.value
		},
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show()
		},
		onConfirm(e) {
			this.pickerText = e.label
			let cityArr =  e.label.split('-')
			this.issuerData.provinceName = cityArr[0]
			this.issuerData.cityName = cityArr[1]
			this.issuerData.areaName = cityArr[2]
		},
		imgclick(key) {
			cos.postObject(url => {
				if(key=='productIcon') {
					this.productIcon = url
				}else{
					this.imgList.push(url)
				}
			})
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			let index = e.currentTarget.dataset.index
			uni.showModal({
				title: '提示',
				content: '是否要删除当前已上传图片？',
				success: res => {
					if (res.confirm) {
						if(index =='-1') {
							cos.deleteObject(this.productIcon)
							this.productIcon = ''
							return
						}
						cos.deleteObject(this.imgList[index])
						this.imgList.splice(index, 1)
					}
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
page, .scen-idle{
	background: #FFFFFF;
	height: 100%;
}
.product-icon{
	width: 140rpx;
	height: 186rpx;
	border-radius: 10rpx;
	background-color: #f2f2f2;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	.bg-img, image{
		width: 140rpx;
		height: 186rpx;
		border-radius: 10rpx;
	}
	.cu-tag{
	    position: absolute;
	    right: 0;
	    top: 0;
	    border-bottom-left-radius: 6rpx;
	    padding: 6rpx 12rpx;
	    height: auto;
	    background-color: rgba(0, 0, 0, 0.5);
	}
}
.product-name{
	flex: 1;
}
.cu-form-group{
	font-size: 28rpx;
	padding: 2rpx 30rpx 2rpx 0;
	.title{
		min-width: 200rpx;
		font-size: 28rpx;
	}
	.input{
		flex: 1;
		font-size: 28rpx;
		color: #555;
		padding-right: 10px;
	}
	.text-red {
		color: #e54d42;
	}
	.num-warp{
		display: flex;
		flex: 1;
		width: 0;
	}
}
</style>
